<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <!-- 日期格式化 -->
<!DOCTYPE html>
<html>
<head>
  <base href="/oa1/" />
  <title>襄阳蓝芯智能化办公系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">

  <script src="static/jquery/jquery-1.10.2.min.js"></script>
  <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>

  <style>
    /* 保持原有.thead-blue样式 */
    .thead-blue {
      color: #fff;
      font-weight: bold;
      background-color: #337ab7;
    }
  </style>
</head>
<body>

<!-- 标题面板：保持原panel-primary风格 -->
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">跟踪记录</h4>
  </div>
</div>

<!-- 跟踪记录列表：保持原表格样式，动态遍历VO -->
<div class="panel panel-primary">
  <table class="table table-bordered table-hover">
    <thead>
    <tr class="thead-blue" align="center">
      <td>客户联系人</td>
      <td>联系时间</td>
      <td>事由</td>
      <td>反馈情况</td>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${pageResult.records}" var="vo">
      <tr align="center">
        <td>${vo.empName}</td>
        <td>${vo.contactDate}</td>
        <td>${vo.reason}</td>
        <td>${vo.result}</td>
      </tr>
    </c:forEach>

    <c:if test="${pageResult.total == 0}">
      <tr align="center">
        <td colspan="4">暂无跟踪记录</td>
      </tr>
    </c:if>
    </tbody>
  </table>
</div>

<div>
  <form action="favorite/listKhContactrecord" id="seachform" method="post" class="form-horizontal" role="form">
    <input type="hidden" name="favoriteid" value="${favoriteid}">
    <input type="hidden" name="customerid" value="${customerid}">
    <input type="hidden" name="page" id="page" value="${pageResult.current}">
    <input type="hidden" name="pageSize" id="pageSize" value="${pageResult.size}">
  </form>
</div>

<!-- 返回按钮：保持原btn-info风格，动态跳转路径 -->
<div class="col-md-3">
  <button type="button" onclick="location.href='favorite/listKhCustomerfavorite?customerid=${customerid}'" class="btn btn-info">返回</button>
</div>

<!-- 分页组件：完全复用原样式，适配动态数据 -->
<div class="input-group col-md-6">
  <div class="row">
    <div class="btn-group">
      <!-- 首页：动态传递当前页大小 -->
      <button onclick="gotoPage(1, ${pageResult.size})" class="btn btn-primary" type="button">首页</button>

      <!-- 上一页：当前页为1时禁用 -->
      <button onclick="gotoPage(${pageResult.current - 1}, ${pageResult.size})" class="btn btn-primary" ${pageResult.current == 1 ? 'disabled' : ''}>上一页</button>

      <!-- 当前页/总页数：动态显示 -->
      <button class="btn btn-primary disabled" type="button">当前第${pageResult.current}/${pageResult.pages}页</button>

      <!-- 每页显示条数下拉框：保持原选项 -->
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          每页显示${pageResult.size}条 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
          <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
          <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
          <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
        </ul>
      </div>

      <!-- 总记录数：动态显示 -->
      <button class="btn btn-primary disabled" type="button">共${pageResult.total}条记录</button>

      <!-- 下一页：当前页等于总页数时禁用 -->
      <button onclick="gotoPage(${pageResult.current + 1}, ${pageResult.size})" class="btn btn-primary" ${pageResult.current == pageResult.pages ? 'disabled' : ''}>下一页</button>

      <!-- 尾页：动态传递总页数 -->
      <button onclick="gotoPage(${pageResult.pages}, ${pageResult.size})" class="btn btn-primary" ${pageResult.current == pageResult.pages ? 'disabled' : ''}>尾页</button>
    </div>
  </div>
</div>

<br><br><br>

<!-- 错误处理脚本：完全复用原有逻辑 -->
<script type="text/javascript">
  $(document).ajaxError(function(event,xhr) {
    if(xhr.status=="403"){//没有权限
      document.location.href = xhr.getResponseHeader("url");
    }else if(xhr.status!="200"){
      console.log("服务器错误!");
    }
  });
</script>

<!-- 分页提交脚本：完全复用原有逻辑 -->
</body>
<script type="text/javascript">
  function gotoPage(page,pageSize){
    $("#page").val(page);
    $("#pageSize").val(pageSize);
    $("#seachform").submit();
  }
</script>
</html>